<template>
  <!-- <HeaderBar></HeaderBar> -->
  <div id="container"></div>
  <div class="input-card" style="inset: 5rem 1rem auto auto; position: absolute">
    <button class="btn" @click="goBack" style="margin-bottom: 5px">返回</button>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import HeaderBar from '@/components/HeaderBar.vue';
import populationList from './common/population.json';
import page01Data from './common/page01Data';

const pointList = [
  {
    name: '北京隅·西颂',
    lng: 116.313784,
    lat: 39.825296,
    address: '北京市丰台区看丹街道花乡桥南500米路-东',
    instalmentId: 'EBF7C368-3315-4B0B-A05E-29E01A01AC50',
  },
  {
    name: '中建·云境',
    lng: 116.306885,
    lat: 39.8163,
    address: '北京市丰台区花乡街道',
    instalmentId: '48595A68-F989-4594-A963-B1B24042C47D',
  },
  {
    name: '中海丰和叁号院',
    lng: 116.303636,
    lat: 39.818324,
    address: '北京市丰台区花乡街道郭公庄北街',
    instalmentId: '1ADC8D95-0B52-49F1-982D-71B59D75FE06',
  },
  {
    name: '建发金茂·观宸',
    lng: 116.36673,
    lat: 39.809484,
    address: '北京市丰台区南苑街道槐房西路',
    instalmentId: 'B3225A80-89D7-4307-BC8B-B44184ADEEB0',
  },
  { name: '中海丽泽叁号院', lng: 116.339764, lat: 39.850581, address: '北京市丰台区玉泉营街道' },
  {
    name: '京能.西贤府',
    lng: 116.239338,
    lat: 39.860634,
    address: '北京市丰台区卢沟桥街道大瓦窑中路',
    instalmentId: '4691CCC8-53E9-48EC-8D9B-BBBE230FEC32',
  },
];

onMounted(() => {
  var map = new AMap.Map('container', {
    center: [116.387175, 39.876405],
    zoom: 13,
  });

  // map.add(rectangle);
  // 缩放地图到合适的视野级别
  // map.setFitView([rectangle]);

  // const rectArray = page01Data.getRectangle(populationList);
  // rectArray.forEach(item => {
  //   map.add(item);
  // });
  // map.setFitView(rectArray);

  const markerArray = page01Data.getMarker(pointList);
  markerArray.forEach(item => {
    map.add(item);
  });

  // 原始代码地址
  // https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/rectangle-draw-and-edit
});

function goBack() {
  history.go(-1);
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>

